<template>
  <div class="flex">
      <div>
    <el-date-picker :disabled-date="disabledDateFun" v-model="value" v-bind="props.searchConfig.formItems[0].elProps" @change="change">
    </el-date-picker>
      </div>
      <div>
        <el-radio-group v-model="radio" class="ml-4" @change="radioChange">
          <el-radio label="year" border>年</el-radio>
          <el-radio label="month" border>月</el-radio>
          <el-radio label="week" border>星期</el-radio>
          <el-radio label="daterange" border>日</el-radio>
        </el-radio-group>
      </div>
  </div>
</template>

<script setup>
import {ref,reactive, watch} from 'vue'
import { dayjs } from "element-plus";

const props = defineProps({
  searchConfig: Object,
  defultValue:Object,
  maxTime:String,
  minTime:String
});
const value = ref([])
watch(()=>props.defultValue,(newval)=>{
  console.log(newval);
  if (newval) {
  value.value = []
  }
},{deep:true},{immediate:true})
console.log(props.minTime);
const disabledDateFun = (time)=> {
    if (time.getTime() > new Date(props.maxTime).getTime() ||time.getTime() < new Date(props.minTime).getTime()) {
    return true;
  } else {
    return false;
  }
}
const radio = ref("year");
const endTime = ref('')
const radioChange = () => {
  value.value = []
  props.searchConfig.formItems.map((e) => {
    if (e.props.prop == "time") {
      e.elProps.type = radio.value;
      switch (radio.value) {
        case "year":
          // value.value = []
          e.elProps.placeholder = "請選擇年份";
          e.elProps.format = "YYYY";
          e.elProps.valueFormat = "YYYY-MM-DD";
          endTime.value = dayjs(value.value).add(1, "year").format("YYYY-MM-DD")
          break;
        case "month":
          // value.value = []
          e.elProps.placeholder = "請選擇月份";
          e.elProps.format = "YYYY-MM";
          e.elProps.valueFormat = "YYYY-MM-DD";
          endTime.value = dayjs(value.value).add(1, "month").format("YYYY-MM-DD")
          break;
        case "week":
          // value.value = []
          e.elProps.placeholder = "請選擇星期";
          e.elProps.format = "[Week] ww";
          e.elProps.valueFormat = "YYYY-MM-DD";
          endTime.value = dayjs(value.value).add(1, "week").format("YYYY-MM-DD")
          break;
        case "daterange":
          value.value = []
          e.elProps.format = "YYYY-MM-DD";
          e.elProps.valueFormat = "YYYY-MM-DD";
          break;
      }
      // e.elProps.placeholder = radio.value == 'year' ? '请选择年份' : radio.value == 'month' ? '请选择年份'
    }
  });
};
const emit = defineEmits(['update'])
const change = ()=>{
     const endTime = ref("");
    const arr = reactive([]);
    let time = ref("")
       if (radio.value == "year" && value.value !== '' ) {
      endTime.value = dayjs(value.value).add(1, "year").format("YYYY-MM-DD");
      time.value = arr.concat(value.value, endTime.value);
    }else 
    if (radio.value == "month" && value.value !== '' ) {
      endTime.value = dayjs(value.value).add(1, "month").format("YYYY-MM-DD");
      time.value = arr.concat(value.value, endTime.value);
    }else
    if (radio.value == "week" && value.value !== '' ||!value.value) {
      endTime.value = dayjs(value.value).add(1, "week").format("YYYY-MM-DD");
      time.value = arr.concat(value.value, endTime.value);
    }else
    if (radio.value == "daterange" && value.value !== ''  ) {
      time.value = value.value
    }else{ 
      time.value = ''
      }
 console.log(time.value);
  emit('update',time.value)
}
const asd = ref('123')
defineExpose({
  value,asd
})
</script>

<style scoped lang='less'>

</style>